
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>在线字体的选择</title>
	<style>
		body{background-color: blanchedalmond;}
		p{position:absolute;}
		div{position:absolute;}
	</style>
</head>
<body>
	<script src="../libs/minicomps.min.js"></script>
	<script src="../libs/Unify.js"></script>
    <script>
        //判断本地是否有安装某种字体
        var Detector = function() {
        // a font will be compared against all the three default fonts.
        // and if it doesn't match all 3 then that font is not available.
        var baseFonts = ['monospace', 'sans-serif', 'serif'];

        //we use m or w because these two characters take up the maximum width.
        // And we use a LLi so that the same matching fonts can get separated
        var testString = "mmmmmmmmmmlli";

        //we test using 72px font size, we may use any size. I guess larger the better.
        var testSize = '72px';

        var h = document.getElementsByTagName("body")[0];

        // create a SPAN in the document to get the width of the text we use to test
        var s = document.createElement("span");
        s.style.fontSize = testSize;
        s.innerHTML = testString;
        var defaultWidth = {};
        var defaultHeight = {};
        for (var index in baseFonts) {
            //get the default width for the three base fonts
            s.style.fontFamily = baseFonts[index];
            h.appendChild(s);
            defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font
            defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font
            h.removeChild(s);
        }

        function detect(font) {
            var detected = false;
            for (var index in baseFonts) {
                s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback.
                h.appendChild(s);
                var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]);
                h.removeChild(s);
                detected = detected || matched;
            }
            return detected;
        }

        this.detect = detect;
    };
    </script>
	<script>
		const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,Image,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown} = mc
		const width = Stage.width;
		const height = Stage.height;
		const parent=document.body;
		var [x,y,h,s]=[10,10,200,'30px'];
		var input=new TextArea(parent,x,y,'',onChange);
		input.setSize(width-20,h);
		input._textArea.style.fontFamily='方正粗圆简体';
		input._textArea.style.fontSize=s;
		//console.log(input._textArea)
		let names=['字体类型','字体大小','字体颜色','背景颜色'];
		let labels=[];
		y+=h+40;
		for(let i=0;i<names.length;i++){
			labels.push(new LabelInput(parent,x+i*180,y,names[i]));
		}
		new Button(parent,x,y+=30,'确定',onClick)
		var p=document.createElement('p');
		document.body.appendChild(p);
		p.style.top='300px'
		p.style.fontFamily=input._textArea.style.fontFamily;
		p.style.fontSize=s;
		function onChange(e){
			p.innerHTML=input.text;
		}
		function onClick(e){
			for(let i=0;i<labels.length;i++){
				var label=labels[i];
				var value=label.input.text
				if(!!value){
					switch(i){
						case 0:
							input._textArea.style.fontFamily=value;
							p.style.fontFamily=value;
                            checkFont(value);
							break;
						case 1:
							input._textArea.style.fontSize=value+'px';
							p.style.fontSize=value+'px';
							break;
						case 2:
							input._textArea.style.color=value;
							p.style.color=value;
							break;
						case 3:
							document.body.style.backgroundColor=value;
							break;
					}
				}
			}
		}
		// 系统支持的所有字词
		var dataFont = {
        'windows': [{
            ch: '宋体',
            en: 'SimSun'
        }, {
            ch: '黑体',
            en: 'SimHei'
        }, {
            ch: '微软雅黑',
            en: 'Microsoft Yahei'
        }, {
            ch: '微软正黑体',
            en: 'Microsoft JhengHei'
        }, {
            ch: '楷体',
            en: 'KaiTi'
        }, {
            ch: '新宋体',
            en: 'NSimSun'
        }, {
            ch: '仿宋',
            en: 'FangSong'
        }],
        'OS X': [{
            ch: '苹方',
            en: 'PingFang SC'
        }, {
            ch: '华文黑体',
            en: 'STHeiti'
        }, {
            ch: '华文楷体',
            en: 'STKaiti'
        }, {
            ch: '华文宋体',
            en: 'STSong'
        }, {
            ch: '华文仿宋',
            en: 'STFangsong'
        }, {
            ch: '华文中宋',
            en: 'STZhongsong'
        }, {
            ch: '华文琥珀',
            en: 'STHupo'
        }, {
            ch: '华文新魏',
            en: 'STXinwei'
        }, {
            ch: '华文隶书',
            en: 'STLiti'
        }, {
            ch: '华文行楷',
            en: 'STXingkai'
        }, {
            ch: '冬青黑体简',
            en: 'Hiragino Sans GB'
        }, {
            ch: '兰亭黑-简',
            en: 'Lantinghei SC'
        }, {
            ch: '翩翩体-简',
            en: 'Hanzipen SC'
        }, {
            ch: '手札体-简',
            en: 'Hannotate SC'
        }, {
            ch: '宋体-简',
            en: 'Songti SC'
        }, {
            ch: '娃娃体-简',
            en: 'Wawati SC'
        }, {
            ch: '魏碑-简',
            en: 'Weibei SC'
        }, {
            ch: '行楷-简',
            en: 'Xingkai SC'
        }, {
            ch: '雅痞-简',
            en: 'Yapi SC'
        }, {
            ch: '圆体-简',
            en: 'Yuanti SC'
        }],
        'office': [{
            ch: '幼圆',
            en: 'YouYuan'
        }, {
            ch: '隶书',
            en: 'LiSu'
        }, {
            ch: '华文细黑',
            en: 'STXihei'
        }, {
            ch: '华文楷体',
            en: 'STKaiti'
        }, {
            ch: '华文宋体',
            en: 'STSong'
        }, {
            ch: '华文仿宋',
            en: 'STFangsong'
        }, {
            ch: '华文中宋',
            en: 'STZhongsong'
        }, {
            ch: '华文彩云',
            en: 'STCaiyun'
        }, {
            ch: '华文琥珀',
            en: 'STHupo'
        }, {
            ch: '华文新魏',
            en: 'STXinwei'
        }, {
            ch: '华文隶书',
            en: 'STLiti'
        }, {
            ch: '华文行楷',
            en: 'STXingkai'
        }, {
            ch: '方正舒体',
            en: 'FZShuTi'
        }, {
            ch: '方正姚体',
            en: 'FZYaoti'
        }],
        'open': [{
            ch: '思源黑体',
            en: 'Source Han Sans CN'
        }, {
            ch: '思源宋体',
            en: 'Source Han Serif SC'
        }, {
            ch: '文泉驿微米黑',
            en: 'WenQuanYi Micro Hei'
        }],
        'hanyi': [{
            ch: '汉仪旗黑',
            en: 'HYQihei 40S'
        }, {
            ch: '汉仪旗黑',
            en: 'HYQihei 50S'
        }, {
            ch: '汉仪旗黑',
            en: 'HYQihei 60S'
        }, {
            ch: '汉仪大宋简',
            en: 'HYDaSongJ'
        }, {
            ch: '汉仪楷体',
            en: 'HYKaiti'
        }, {
            ch: '汉仪家书简',
            en: 'HYJiaShuJ'
        }, {
            ch: '汉仪PP体简',
            en: 'HYPPTiJ'
        }, {
            ch: '汉仪乐喵体简',
            en: 'HYLeMiaoTi'
        }, {
            ch: '汉仪小麦体',
            en: 'HYXiaoMaiTiJ'
        }, {
            ch: '汉仪程行体',
            en: 'HYChengXingJ'
        }, {
            ch: '汉仪黑荔枝',
            en: 'HYHeiLiZhiTiJ'
        }, {
            ch: '汉仪雅酷黑W',
            en: 'HYYaKuHeiW'
        }, {
            ch: '汉仪大黑简',
            en: 'HYDaHeiJ'
        }, {
            ch: '汉仪尚魏手书W',
            en: 'HYShangWeiShouShuW'
        }],
        'fangzheng': [{
            "ch": "方正粗雅宋简体",
            "en": "FZYaSongS-B-GB"
        }, {
            "ch": "方正报宋简体",
            "en": "FZBaoSong-Z04S"
        }, {
            "ch": "方正粗圆简体",
            "en": "FZCuYuan-M03S"
        }, {
            "ch": "方正大标宋简体",
            "en": "FZDaBiaoSong-B06S"
        }, {
            "ch": "方正大黑简体",
            "en": "FZDaHei-B02S"
        }, {
            "ch": "方正仿宋简体",
            "en": "FZFangSong-Z02S"
        }, {
            "ch": "方正黑体简体",
            "en": "FZHei-B01S"
        }, {
            "ch": "方正琥珀简体",
            "en": "FZHuPo-M04S"
        }, {
            "ch": "方正楷体简体",
            "en": "FZKai-Z03S"
        }, {
            "ch": "方正隶变简体",
            "en": "FZLiBian-S02S"
        }, {
            "ch": "方正隶书简体",
            "en": "FZLiShu-S01S"
        }, {
            "ch": "方正美黑简体",
            "en": "FZMeiHei-M07S"
        }, {
            "ch": "方正书宋简体",
            "en": "FZShuSong-Z01S"
        }, {
            "ch": "方正舒体简体",
            "en": "FZShuTi-S05S"
        }, {
            "ch": "方正水柱简体",
            "en": "FZShuiZhu-M08S"
        }, {
            "ch": "方正宋黑简体",
            "en": "FZSongHei-B07S"
        }, {
            "ch": "方正宋三简体",
            "en": "FZSong"
        }, {
            "ch": "方正魏碑简体",
            "en": "FZWeiBei-S03S"
        }, {
            "ch": "方正细等线简体",
            "en": "FZXiDengXian-Z06S"
        }, {
            "ch": "方正细黑一简体",
            "en": "FZXiHei I-Z08S"
        }, {
            "ch": "方正细圆简体",
            "en": "FZXiYuan-M01S"
        }, {
            "ch": "方正小标宋简体",
            "en": "FZXiaoBiaoSong-B05S"
        }, {
            "ch": "方正行楷简体",
            "en": "FZXingKai-S04S"
        }, {
            "ch": "方正姚体简体",
            "en": "FZYaoTi-M06S"
        }, {
            "ch": "方正中等线简体",
            "en": "FZZhongDengXian-Z07S"
        }, {
            "ch": "方正准圆简体",
            "en": "FZZhunYuan-M02S"
        }, {
            "ch": "方正综艺简体",
            "en": "FZZongYi-M05S"
        }, {
            "ch": "方正彩云简体",
            "en": "FZCaiYun-M09S"
        }, {
            "ch": "方正隶二简体",
            "en": "FZLiShu II-S06S"
        }, {
            "ch": "方正康体简体",
            "en": "FZKangTi-S07S"
        }, {
            "ch": "方正超粗黑简体",
            "en": "FZChaoCuHei-M10S"
        }, {
            "ch": "方正新报宋简体",
            "en": "FZNew BaoSong-Z12S"
        }, {
            "ch": "方正新舒体简体",
            "en": "FZNew ShuTi-S08S"
        }, {
            "ch": "方正黄草简体",
            "en": "FZHuangCao-S09S"
        }, {
            "ch": "方正少儿简体",
            "en": "FZShaoEr-M11S"
        }, {
            "ch": "方正稚艺简体",
            "en": "FZZhiYi-M12S"
        }, {
            "ch": "方正细珊瑚简体",
            "en": "FZXiShanHu-M13S"
        }, {
            "ch": "方正粗宋简体",
            "en": "FZCuSong-B09S"
        }, {
            "ch": "方正平和简体",
            "en": "FZPingHe-S11S"
        }, {
            "ch": "方正华隶简体",
            "en": "FZHuaLi-M14S"
        }, {
            "ch": "方正瘦金书简体",
            "en": "FZShouJinShu-S10S"
        }, {
            "ch": "方正细倩简体",
            "en": "FZXiQian-M15S"
        }, {
            "ch": "方正中倩简体",
            "en": "FZZhongQian-M16S"
        }, {
            "ch": "方正粗倩简体",
            "en": "FZCuQian-M17S"
        }, {
            "ch": "方正胖娃简体",
            "en": "FZPangWa-M18S"
        }, {
            "ch": "方正宋一简体",
            "en": "FZSongYi-Z13S"
        }, {
            "ch": "方正剪纸简体",
            "en": "FZJianZhi-M23S"
        }, {
            "ch": "方正流行体简体",
            "en": "FZLiuXingTi-M26S"
        }, {
            "ch": "方正祥隶简体",
            "en": "FZXiangLi-S17S"
        }, {
            "ch": "方正粗活意简体",
            "en": "FZCuHuoYi-M25S"
        }, {
            "ch": "方正胖头鱼简体",
            "en": "FZPangTouYu-M24S"
        }, {
            "ch":"方正铁筋隶书简体",
            "en":"FZTieJinLiShu-Z14S"
        }, {
            "ch":"方正北魏楷书简体",
            "en":"FZBeiWeiKaiShu-Z15S"
        }, {
            "ch": "方正卡通简体",
            "en": "FZKaTong-M19S"
        }, {
            "ch": "方正艺黑简体",
            "en": "FZYiHei-M20S"
        }, {
            "ch": "方正水黑简体",
            "en": "FZShuiHei-M21S"
        }, {
            "ch": "方正古隶简体",
            "en": "FZGuLi-S12S"
        }, {
            "ch": "方正幼线简体",
            "en": "FZYouXian-Z09S"
        }, {
            "ch": "方正启体简体",
            "en": "FZQiTi-S14S"
        }, {
            "ch": "方正小篆体",
            "en": "FZXiaoZhuanTi-S13T"
        }, {
            "ch": "方正硬笔楷书简体",
            "en": "FZYingBiKaiShu-S15S"
        }, {
            "ch": "方正毡笔黑简体",
            "en": "FZZhanBiHei-M22S"
        }, {
            "ch": "方正硬笔行书简体",
            "en": "FZYingBiXingShu-S16S"
        }]
    };
	var items=[];
	for(let k in dataFont){
		let d=dataFont[k];
		for(let i=0;i<d.length;i++){
			items.push(d[i]['ch']);
		}
	}
    var detective = new Detector();
	new Dropdown(parent,x+200,y,items,0,onDropdown);
	function onDropdown(e){
        let font=e.detail.text;
		labels[0].input.text=font;
		onClick();
	}
    function checkFont(font){
        if(!detective.detect(font)){
            TipsManager.alert(`未安字体【${font}】`)
        }
    }
	input.text='默认的字体是方正粗圆简体'
	</script>
</body>
</html>
